<template>
	<view class="container">
		<!-- 标题 -->
		<view class="header">
			<text class="title">班级表扬榜</text>
			<text class="subtitle">表扬是一种力量，激励我们不断进步</text>
		</view>

		<!-- 图表容器 - 点击可切换 -->
		<view class="glass-card chart-container" :animation="fadeIn">
			<view class="chart-title" @click="toggleChartType">{{chartTitle}}</view>
			<!-- 表扬次数统计图表 -->
			<scroll-view scroll-x class="chart-scroll"
				v-if="showPraiseChart && chartData.series && chartData.series[0].data.length > 5">
				<view class="chart-wrapper" :style="{width: chartWidth + 'px'}">
					<qiun-data-charts type="mount" :chartData="chartData" />
				</view>
			</scroll-view>
			<qiun-data-charts v-else-if="showPraiseChart" type="mount" :ontouch="true" :chartData="chartData"
				:opts="mountChartOpts" />

			<!-- 学科学分占比图 -->
			<qiun-data-charts v-if="!showPraiseChart" type="ring" :chartData="subjectChartData" :opts="ringChartOpts" />
		</view>

		<!-- 功能卡片区域 -->
		<view class="card-group">
			<!-- 添加表扬卡片 -->
			<view class="glass-card action-card" @click="navigateToAdd" :animation="slideUp1">
				<view class="card-icon" style="background: linear-gradient(135deg, #FF9A9E 0%, #FAD0C4 100%);">
					<uni-icons type="plus" size="28" color="#fff"></uni-icons>
				</view>
				<view class="card-content">
					<text class="card-title">添加表扬</text>
					<text class="card-desc">记录学生的进步与优秀表现</text>
				</view>
				<uni-icons type="forward" size="20" color="#999"></uni-icons>
			</view>

			<!-- 查看历史卡片 -->
			<view class="glass-card action-card" @click="navigateToHistory" :animation="slideUp2">
				<view class="card-icon" style="background: linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%);">
					<uni-icons type="list" size="28" color="#fff"></uni-icons>
				</view>
				<view class="card-content">
					<text class="card-title">历史表扬榜</text>
					<text class="card-desc">查看所有表扬记录</text>
				</view>
				<uni-icons type="forward" size="20" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 表扬排行榜 -->
		<view class="glass-card praise-ranking" :animation="fadeIn">
			<view class="section-title">表扬排行榜</view>
			<view class="ranking-item" v-for="(item, index) in praiseRanking" :key="index"
				@click="showStudentDetail(item.studentId)">
				<view class="rank-index" :class="{'top-3': index < 3}">
					{{ index + 1 }}
				</view>
				<image :src="item.aver || '/static/aver1.jpg'" class="avatar"></image>
				<view class="student-info">
					<text class="student-name">{{ item.studentName }}</text>
					<text class="grade">{{ item.grade }}</text>
				</view>
				<view class="praise-count">
					<text>{{ item.count }}次</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		data() {
			return {
				chartData: {},
				subjectChartData: {},
				chartWidth: 750, // 初始宽
				praiseRanking: [],
				fadeIn: {},
				slideUp1: {},
				slideUp2: {},
				grade: "",
				parise: [],
				showPraiseChart: true, // 默认显示表扬次数统计
				chartTitle: "本月表扬次数统计", // 图表标题
				mountChartOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						itemCount: 4,
						scrollShow: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						mount: {
							type: "mount",
							widthRatio: 1.5,
							borderWidth: 2,
							linearType: "opacity",
							linearOpacity: 0.1
						}
					}
				},
				ringChartOpts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						show: false,
						name: "",
						fontSize: 0
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		onLoad(option) {
			this.grade = option.grade
			this.initAnimation();
			this.fetchPraiseData();
		},
		onShow() {
			this.fetchPraiseData();
		},
		methods: {
			// 切换图表类型
			toggleChartType() {
				this.showPraiseChart = !this.showPraiseChart;
				this.chartTitle = this.showPraiseChart ? "本月表扬次数统计" : "学科学分占比";
			},
			initAnimation() {
				// 初始化动画
				this.fadeIn = uni.createAnimation({
					duration: 800,
					timingFunction: 'ease'
				}).opacity(1).step().export();

				this.slideUp1 = uni.createAnimation({
					duration: 600,
					timingFunction: 'ease-out',
					delay: 200
				}).translateY(0).opacity(1).step().export();

				this.slideUp2 = uni.createAnimation({
					duration: 600,
					timingFunction: 'ease-out',
					delay: 400
				}).translateY(0).opacity(1).step().export();
			},
			fetchPraiseData() {
				let that = this;
				uni.request({
					url: globalVariable + "/getAllPriseByGrade?grade=" + that.grade,
					method: 'get',
					success(res) {
						let info = res.data;
						if (info.status == 1) {
							that.parise = info.data
							that.deal(info.data)
						}
					}
				})
			},
			deal(data) {
				// 处理数据，统计每个学生的表扬次数
				const praiseCountMap = {};
				// 统计学科分布
				const subjectCountMap = {};

				data.forEach(item => {
					// 统计学生表扬次数
					if (!praiseCountMap[item.studentId]) {
						praiseCountMap[item.studentId] = {
							studentId: item.studentId,
							studentName: item.studentName,
							grade: item.grade,
							count: 0
						};
					}
					praiseCountMap[item.studentId].count++;

					// 统计学科分布
					if (item.subject) {
						subjectCountMap[item.subject] = (subjectCountMap[item.subject] || 0) + 1;
					}
				});

				// 准备学生排名数据
				let praiseRanking2 = Object.values(praiseCountMap);
				this.praiseRanking = Object.values(praiseCountMap).sort((a, b) => b.count - a.count);

				// 准备学科分布数据
				this.subjectChartData = {
					series: [{
						data: Object.keys(subjectCountMap).map(subject => ({
							name: subject,
							value: subjectCountMap[subject]
						}))
					}]
				};

				this.prepareChartData(praiseRanking2);
			},
			prepareChartData(praiseRanking2) {
				const chartSeriesData = praiseRanking2.map(item => ({
					name: item.studentName,
					value: item.count
				}));

				this.chartData = {
					series: [{
						name: '表扬次数',
						data: chartSeriesData
					}]
				};

				// 如果需要滚动，计算图表宽度
				if (chartSeriesData.length > 3) {
					this.chartWidth = chartSeriesData.length * 180;
				}
			},
			navigateToAdd() {
				let that = this;
				uni.navigateTo({
					url: '/pages/praise/praise?grade=' + that.grade
				});
			},
			navigateToHistory() {
				let that = this;
				uni.navigateTo({
					url: '/pages/pariseHistory/pariseHistory?praiseData=' + JSON.stringify(that.parise) +
						"&grade=" + that.grade
				});
			},
			showStudentDetail(item) {
				uni.navigateTo({
					url: "/pages/pariseHistoryOne/pariseHistoryOne?studentId=" + item + "&grade=" + this.grade
				});
			},
			formatTime(time) {
				if (!time) return '';
				return time.split(' ')[0].replace(/-/g, '/');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		background-image:
			radial-gradient(circle at 10% 20%, rgba(255, 15, 51, 0.1) 0%, transparent 20%),
			radial-gradient(circle at 90% 80%, rgba(8, 255, 111, 0.1) 0%, transparent 20%);

		.header {
			margin-bottom: 40rpx;
			text-align: center;

			.title {
				display: block;
				font-size: 42rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.subtitle {
				display: block;
				font-size: 26rpx;
				color: #888;
			}
		}
	}

	/* 毛玻璃卡片基础样式 */
	.glass-card {
		background: rgba(255, 255, 255, 0.6);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.4);
		transition: all 0.3s ease;
		margin-bottom: 30rpx;
		overflow: hidden;

		&:active {
			transform: scale(0.98);
		}
	}

	.chart-container {
		padding: 20rpx;

		.chart-title {
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 20rpx 10rpx;
		}

		.chart-scroll {
			width: 100%;
			height: 400rpx;
			white-space: nowrap;

			.chart-wrapper {
				display: inline-block;
				height: 400rpx;
			}
		}
	}

	.card-group {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.action-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		opacity: 0;
		transform: translateY(50rpx);

		.card-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		}

		.card-content {
			flex: 1;

			.card-title {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 6rpx;
			}

			.card-desc {
				display: block;
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.praise-ranking {
		padding: 20rpx 0;

		.section-title {
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		}

		.ranking-item {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);

			&:last-child {
				border-bottom: none;
			}

			.rank-index {
				width: 50rpx;
				text-align: center;
				font-size: 32rpx;
				color: #999;
				margin-right: 20rpx;

				&.top-3 {
					font-weight: bold;
					color: #FF9A9E;
				}
			}

			.avatar {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}

			.student-info {
				flex: 1;

				.student-name {
					display: block;
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 4rpx;
				}

				.grade {
					display: block;
					font-size: 24rpx;
					color: #999;
				}
			}

			.praise-count {
				font-size: 28rpx;
				color: #FF9A9E;
				font-weight: bold;
			}
		}
	}

	/* 图表容器样式 */
	.charts-box {
		width: 100%;
		height: 400rpx;
	}
</style>